<script setup lang="ts">
/*========================================>( 模型属性 )<========================================*/
/*========================================>( 父传子属性 )<========================================*/
const props = defineProps(['data','name','more'])
/*========================================>( 监听方法 )<========================================*/
//监听点击更多按钮
const handleMoreClick = () => {
    uni.navigateTo({
        url:props.more
    })
}
//监听点击产品
const handleProductClick = (index: number) => {

}

</script>
<template>
    <view class="product-pad">
        <view class="title">
            <text><svg-icon name="hot" width="20" height="20" /> {{ props.name }}</text>
            <view class="more" @click="handleMoreClick">更多<svg-icon name="right" width="20" height="20" /></view>
        </view>
        <view class="list">
            <view class="item" v-for="item, index in props.data" :key="index" @click="handleProductClick(index)">
                <view class="thumbnail" :style="{ backgroundImage: 'url(' + item.img + ')' }"></view>
                <view class="info">
                    <view class="name">{{ item.name }}</view>
                    <view class="detail">{{ item.detail }}</view>
                    <view class="count">已售{{ item.count }}</view>
                </view>
                <view class="price">¥{{ item.price }}</view>
            </view>
        </view>
    </view>
</template>
<style lang="scss"></style>
<style lang="scss" scoped>
.product-pad {
    width: 92vw;
    display: table;
    margin: 10px auto;
    border-radius: 12px;
    background-color: #fff;
    padding: 0 5px;

    .title {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-indent: 1em;
        font-weight: bold;

        .more {
            float: right;
            margin-right: 5px;
            color: #666;
            font-size: 15px;
            text-decoration: underline;
        }
    }

    .list {
        width: 100%;
        display: table;
        padding-bottom: 10px;

        .item {
            width: 100%;
            height: 15vw;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin:12px 0;

            .thumbnail {
                width: 15vw;
                height: 15vw;
                background-color: #ccc;
                margin: 10px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: 100%;
            }

            .info {
                display: flex;
                height: 15vw;
                flex-direction: column;
                flex-grow: 1;
                margin-left: 10px;

                .name {
                    flex:2;
                    padding-bottom: 5px;
                }

                .detail {
                    flex:2;
                    color: #333;
                    font-size: 12px;
                }
                .count{
                    flex:1;
                    color: #777;
                    font-size: 12px;
                }
            }

            .price {
                width: 50px;
                color: #CC3333;
                font-weight: bold;
            }

        }
    }
}
</style>